<template>
  <el-row class="tm-storage-view" :gutter="20">
    <el-col :span="24">
      <el-button :key="path" type="text" @click="handleSelectPath(-1)">root</el-button>
      <i class="el-icon-arrow-right"></i>
      <template v-for="(path, i) in pathes">
        <el-button :key="path" type="text" @click="handleSelectPath(i)">{{ path }}</el-button>
        <!-- <el-divider :key="path + '_divider'" direction="vertical"></el-divider> -->
        <i :key="path + '_divider'" class="el-icon-arrow-right"></i>
      </template>
    </el-col>
    <el-col :span="6" class="list">
      <div
        class="list-item"
        :class="{ active: activeKey === key }"
        v-for="key in show_aside"
        :key="key"
        @click="handleClick(key)"
      >
        {{ key }}
      </div>
    </el-col>
    <el-col :span="18" class="table-container">
      <div class="table-main">
        <el-table :data="show_data" resizable border style="height: 100%; width: 100%">
          <el-table-column v-for="conf in config" :key="conf.label" v-bind="conf"></el-table-column>
        </el-table>
      </div>
      <div class="table-page">
        <el-pagination
          background
          :page-sizes="[10, 15, 20, 30]"
          :page-size.sync="page_size"
          :current-page.sync="page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.length"
        >
        </el-pagination>
      </div>
    </el-col>
  </el-row>
</template>

<script>
function get(root, pathes) {
  if (!pathes) {
    return root
  }
  let o = root
  pathes.split('.').forEach((p) => {
    o = o[p]
  })
  return o
}
function keys(root) {
  return Object.keys(root)
}
export default {
  data() {
    return {
      pathes: [],
      keys: GM_listValues(),
      activeKey: '',
      data: [],
      page: 1,
      page_size: 15
    }
  },
  computed: {
    config() {
      if (this.data.length) {
        return Object.keys(this.data[0]).map((key) => {
          return {
            label: key,
            prop: key
          }
        })
      }
      return []
    },
    show_aside() {
      let root = null
      let pathes = this.pathes
      if (pathes.length) {
        root = GM_getValue(pathes[0])
      }
      let o = get(root, pathes.slice(1).join('.'))
      console.log('pathes', pathes)
      console.log('o', o)
      if (o) {
        console.log('o', keys(o))
      }
      return pathes.length ? keys(o) : this.keys
    },
    show_data() {
      return this.data.filter((item, i) => {
        return i > (this.page - 1) * this.page_size && i <= this.page * this.page_size
      })
    }
  },
  methods: {
    handleClick(key) {
      this.activeKey = key
      let data = null
      if (this.pathes.length) {
        data = GM_getValue(this.pathes[0])
        data = get(data, this.pathes.slice(1).join('.'))
        data = data[key]
      } else {
        data = GM_getValue(key, [])
      }
      // let data = GM_getValue(key, [])
      this.data = Array.isArray(data) ? data : []
      if ($.isPlainObject(data)) {
        this.pathes.push(key)
      }
    },
    refresh() {
      this.keys = GM_listValues()
    },
    handleSelectPath(i) {
      if (i === -1) {
        this.pathes = []
      }
      this.pathes = this.pathes.slice(0, i + 1)
    }
  }
}
</script>
